<template>
	<page>
		<!-- <import src="../../../wxParse/wxParse.wxml" /> -->
		<view class='container'>

			<view class='banner'>
				<image v-if="id == 1" src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/1/banner.jpg'></image>
				<image v-if="id == 2" src='http://aliyun.oss.zxgyzj.com/picture/payment/2/banner.jpg'></image>
				<image v-if="id == 3" src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/banner.jpg'></image>
			</view>


			<view v-if="systemInfo==1">
				<view class='top'>
					<view class='top-title'>会员类别选择</view>
					<view class='top-wrap'>
						<view class='top-item-wrap dp-flex'>
							<view class='top-item' v-for="(item,index) in lists" :data-id="item.id" :data-price="item.price" :data-name="item.name"
							 @tap='onVIP' :class="item.id === id ? 'active':''">
								<view>{{item.name}}</view>
								<view class='top-item-red'>{{item.price}}元/年</view>
							</view>
						</view>
					</view>
				</view>

				<view class='equity'>
					<view v-if="id == 1">
						<view class='equity-title'>
							<image src='http://aliyun.oss.zxgyzj.com/picture/payment/1/title.jpg'></image>
						</view>
						<view class='equity-list'>
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/1.jpg'></image>
		          <text>推广分红</text>
		          <text>连续三年</text>
		        </view> -->
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/2.png'></image>
								<text>联系雇主</text>
								<text>不限次数</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/3.png'></image>
								<text>排名靠前</text>
								<text>就近接单</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/4.png'></image>
								<text>智能名片</text>
								<text>高效传播</text>
							</view>
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/5.png'></image>
		          <text>专属海报</text>
		          <text>业务倍增</text>
		        </view> -->
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/6.png'></image>
								<text>商家厂家</text>
								<text>资源共享</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/7.png'></image>
								<text>就近找人</text>
								<text>技能共享</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/8.png'></image>
								<text>行业推广</text>
								<text>人脉共享</text>
							</view>
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img' src='http://aliyun.oss.zxgyzj.com/picture/payment/1/9.png'></image>
		          <text>更多权益</text>
		          <text>会员专享</text>
		        </view> -->
						</view>
					</view>
					<view v-if="id == 2">
						<view class='equity-title'>
							<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/title.jpg'></image>
						</view>
						<view class='equity-list'>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/1.png'></image>
								<text>一钻功能</text>
								<text>您都享有</text>
							</view>
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img'src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/2.jpg'></image>
		          <text>推广分工</text>
		          <text>连续三年</text>
		        </view> -->
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/3.png'></image>
								<text>开设店铺</text>
								<text>业绩倍增</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/4.png'></image>
								<text>建材团购</text>
								<text>裂变推广</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/5.png'></image>
								<text>品牌传播</text>
								<text>驰名业内</text>
							</view>
							<!-- <view class='equity-list-item' bindtap='goVideo'>
		          <image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/6.jpg'></image>
		          <text>视频推广</text>
		          <text>直达店铺</text>
		        </view> -->
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/7.png'></image>
								<text>微信分享</text>
								<text>方便快捷</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/8.png'></image>
								<text>快速开店</text>
								<text>简便易用</text>
							</view>
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/9.png'></image>
		          <text>异业联盟</text>
		          <text>抱团作战</text>
		        </view> -->
						</view>
					</view>
					<view v-if="id == 3">
						<view class='equity-title'>
							<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/title.jpg'></image>
						</view>
						<view class='equity-list'>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/1.png'></image>
								<text>二钻功能</text>
								<text>您都享有</text>
							</view>
							<view class='equity-list-item' bindtap='goVideo'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/6.jpg'></image>
								<text>专属客服</text>
								<text>全程协助</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/2/9.png'></image>
								<text>异业联盟</text>
								<text>抱团作战</text>
							</view>
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img'src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/2.jpg'></image>
		          <text>推广分红</text>
		          <text>连续三年</text>
		        </view> -->
							<!-- <view class='equity-list-item'>
		          <image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/3.png'></image>
		          <text>群雄领袖</text>
		          <text>城市代理</text>
		        </view> -->
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/4.png'></image>
								<text>海量资源</text>
								<text>免费赠送</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/5.png'></image>
								<text>营销策略</text>
								<text>技术支持</text>
							</view>
							<view class='equity-list-item'>
								<image class='equity-list-item-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/payment/3/6.jpg'></image>
								<text>先知先觉</text>
								<text>财富共享</text>
							</view>
						</view>
					</view>
				</view>

				<view class='btn'>
					<button class='top-btn weui-btn' @tap='onPay'>微信支付</button>
					<!-- <button class='top-btn weui-btn' bindtap='onPay'>微信支付：{{price}}元</button> -->
				</view>
			</view>
			<view v-else-if="systemInfo==2">
				<view class='ios-top-title'>您的设备暂不支持此服务!</view>
			</view>
		</view>
	</page>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad(options) {
			var that = this;
			//程序进来判断设备
			uni.getSystemInfo({
				success: function(res) {
					if (res.platform == "devtools" || res.platform == "android") {
						console.log('android');
						that.systemInfo = 1;
						that.orderId = options.id || "";

					} else if (res.platform == "ios") {
						console.log('ios');
						that.systemInfo = 2;
						that.orderId = options.id || "";
					}
				}
			})
			/*获取会员等级*/
			gyzjModel.prototype.getVipLevel().then(res => {
				const data = res.data.data;
				for (let i = 0; i < data.length; i++) {
					data[i].price = data[i].price.slice(0, data[i].price.length - 3);
				}
				this.lists = data;
				this.id = data[0].id;
			})
		},
		data() {
			return {
				lists: [],
				id: '',
				price: 0,
				name: '',
				radioChecked: true,
				orderId: "",
				systemInfo: 1,
			}
		},
		methods: {
			
			/*视频播放*/
			goVideo: function() {
				var fitment = {
					title: '人见人爱，人美心更美。装修兄弟们都爱死你了',
					imgUrl: 'https://gy-files.oss-cn-shenzhen.aliyuncs.com/video/fitment/4231139.jpg',
					transpondImg: 'http://aliyun.oss.zxgyzj.com/video/fitment/4231139400500.jpg',
					url: 'http://aliyun.oss.zxgyzj.com/video/fitment/4231139.mp4'
				}
				fitment = JSON.stringify(fitment);
				// uni.navigateTo({
				//   url: '../../fitmentVideo/videoDetails/videoDetails?fitment=' + fitment,
				// })
			},
			/*点击切换*/
			onVIP: function(e) {
				console.log('点击切换',e);
				const {
					id,
					name,
					price
				} = e.currentTarget.dataset;
				console.log(e.currentTarget.dataset);
				this.id = id;
				this.name = name;
				this.price = price;
			},
			/*全局函数*/
			main_getGlobal() {
				let globalData = app.globalData;
				console.log('进来globalData', globalData);
				var type, token, arr = new Array();
				if (globalData.mobile) {
					arr['type'] = 2;
					arr['token'] = globalData.mobile;
					console.log('arr为mobile', arr);
				} else if (globalData.token) {
					arr['type'] = 1;
					arr['token'] = uni.getStorageSync('token');
					console.log('arr为token', arr);
				}
				return arr;
			},
			/*点击微信支付*/
			onPay: function() {
				let _this = this;
				/*定义常量的方式还是*/
				const {
					id,
					name,
					price,
					radioChecked
				} = this;
				if (!id) {
					uni.showToast({
						title: '请选择一项会员等级再进行操作',
						icon: 'none',
					})
					return;
				}
				// if (!radioChecked) {
				// 	uni.showToast({
				// 		title: '请同意入驻协议后再进行操作',
				// 		icon: 'none',
				// 	})
				// 	return;
				// }
				var arr=this.main_getGlobal();
				let postData={
					lever_id:id
				};
				gyzjModel.prototype.buyVip(postData,arr.token,arr.type,id).then(res => {
					console.log('支付的res',res);
					const {
						pay,
						order
					} = res.data;
					uni.requestPayment({
						timeStamp: pay.timeStamp,
						nonceStr: pay.nonceStr,
						package: pay.package,
						signType: pay.signType,
						paySign: pay.paySign,
						'signType':'MD5',
						success: () => {
							gyzjModel.prototype.checkWechatOrder(order.order_sn).then(res => {
								// event.emit('afterVIPChange');
								/*设置会员等级全局*/
								app.globalData.userInfo.viplever_id = id;
								uni.showModal({
									content: '恭喜你购买成功！',
									showCancel: false,
									confirmColor: '#f94c48',
									success: (res) => {
										console.log('购买成功的res',res);
										if (res.confirm) {
											if (_this.orderId) {
												uni.redirectTo({
													url: '/pages/order-lists/order-detail/order-detail?id=' + _this.data.orderId,
												})
											} else {
												uni.navigateBack({})
											}
										}
									}
								})
							})
						},
						fail: (error) => {
							uni.showToast({
								title: '支付失败，' + error,
								icon: 'none',
							})
							console.log(error);
						}
					})
				})
			},
		}
	}
</script>

<style>
	@import url("../../../static/style/app.css");

	.container {
		padding-bottom: 120upx;
	}

	.banner {
		width: 100%;
		height: 300upx;
		background-color: #fff;
	}

	.banner image {
		width: 100%;
		height: 95%;
	}

	.equity {
		margin-top: 20upx;
		background-color: #fff;
		padding: 10upx 0 20upx 0;
	}

	.equity-title {
		width: 100%;
		height: 160upx;
	}

	.equity-title image {
		width: 100%;
		height: 90%;
	}

	.equity-list {
		display: flex;
		flex-wrap: wrap;
	}

	.equity-list-item {
		width: 33.3%;
		height: 250upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
	}

	.equity-list-item-img {
		width: 140upx;
		height: 140upx;
		margin-bottom: 10upx;
	}


	.top,
	.bottom {
		overflow: hidden;
	}

	.top-wrap,
	.bot-content {
		padding: 20upx 30upx;
		background-color: #fff;
	}

	.top-title {
		font-size: 18px;
		font-weight: 600;
		padding: 20upx 30upx;
		background-color: #fff;
	}

	.bot-title {
		font-size: 18px;
		text-align: center;
		margin: 20upx 30upx;
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-btn {
		width: 90%;
		height: 90upx;
		margin: 10upx auto;
		background-color: #f94c48;
		color: #fff;
		border-radius: 90upx;
	}

	.top-item {
		width: 48%;
		margin-right: 2%;
		border-radius: 5px;
		background-color: #F8F8F8;
		color: #333;
		text-align: center;
		padding: 30upx 0;
	}

	.top-item:last-of-type {
		margin-right: 0;
	}

	.bot-content {
		padding-bottom: 20upx;
	}

	.top-item-red {
		font-size: 28upx;
		color: #E3B67B;
	}

	.active {
		background-color: #E3B67B;
		color: #fff;
	}

	.active>.top-item-red {
		color: #fff;
	}

	image {
		max-width: 100%;
	}

	.circle-red {
		width: 15upx;
		height: 15upx;
		background-color: #F94C48;
		border-radius: 50%;
		margin-right: 15upx;
	}

	/*ios样式的判断*/
	.ios-top-title {
		font-size: 18px;
		font-weight: 600;
		padding: 20upx 30upx;
		background-color: #fff;
		text-align: center;
	}
</style>
